---
id: centered_view
title: CenteredView
sidebar_label: CenteredView
---

CenteredView is a layout utility component that centers its children within the parent container. It's ideal for creating centered layouts with an optional maximum width.

## Usage

Import the `CenteredView` from `@firecms/ui` and wrap the content you wish to be centered. Optionally, specify a maximum width for the centered content or make it full screen.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Centered View

Demonstrates a centered view with default settings.

import CenteredViewBasicDemo from '../../samples/components/centered_view/centered_view_basic';
import CenteredViewBasicSource from '!!raw-loader!../../samples/components/centered_view/centered_view_basic';

<CodeSample>
    <CenteredViewBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{CenteredViewBasicSource}</CodeBlock>

## Max Width Centered View

Shows a centered view with a maximum width set.

import CenteredViewMaxWidthDemo from '../../samples/components/centered_view/centered_view_max_width';
import CenteredViewMaxWidthSource from '!!raw-loader!../../samples/components/centered_view/centered_view_max_width';

<CodeSample>
    <CenteredViewMaxWidthDemo/>
</CodeSample>

<CodeBlock language="tsx">{CenteredViewMaxWidthSource}</CodeBlock>


## Custom Styling Centered View

Illustrates how custom styles and classes can be applied to the centered view for a unique appearance.

import CenteredViewCustomStyleDemo from '../../samples/components/centered_view/centered_view_custom_style';
import CenteredViewCustomStyleSource from '!!raw-loader!../../samples/components/centered_view/centered_view_custom_style';

<CodeSample>
    <CenteredViewCustomStyleDemo/>
</CodeSample>

<CodeBlock language="tsx">{CenteredViewCustomStyleSource}</CodeBlock>
